<template>
    <div class="project-form-box">
        <div class="resource-manage" >
            <div class="card-box">
                <div class="card-title">土地信息</div>
                <el-form
                    ref="landInfo"
                    class="form-wrap"
                    label-position="top"
                    size="small"
                    :model="propForm.landInfo">
                    <el-form-item label="宗地号" prop="parcelNum">
                        <span class="in_txt">{{propForm.landInfo.parcelNum}}</span>
                    </el-form-item>
                    <el-form-item label="宗地面积(m²)" prop="parcelArea">
                        <span class="in_txt">{{propForm.landInfo.parcelArea}}</span>
                    </el-form-item>
                    <el-form-item label="土地用途" prop="landUse">
                        <span class="in_txt">{{getCardTypeValue(propForm.landInfo.landUse,landUses)}}</span>
                    </el-form-item>
                    <el-form-item label="物业地址" prop="cityCode" class="full">
                        <span class="in_txt">{{getCardTypeValue(propForm.landInfo.cityCode,cityAssembly)}}
                                {{getCardTypeValue(propForm.landInfo.countyCode,districtCollection)}}
                                {{getCardTypeValue(propForm.landInfo.street,projectStreet)}}
                                {{getCardTypeValue(propForm.landInfo.community,communityNameStreet)}}
                                {{propForm.landInfo.addressInfo}}</span>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="resource-manage" >
            <div class="card-box">
                <div class="card-title">项目信息</div>
                <el-form
                    ref="propertyBasic"
                    label-position="top"
                    class="form-wrap"
                    size="small"
                    :model="propForm.propertyBasic">
                    <el-form-item label="项目编号" prop="projectCode" v-if="isEdit">
                        <span class="in_txt">{{propForm.propertyBasic.projectCode}}</span>
                    </el-form-item>
                    <el-form-item label="项目国家编号" >
                        <el-col class="in_txt">{{propForm.propertyBasic.projectCountryCode}}</el-col>
                    </el-form-item>
                    <el-form-item label="项目名称" prop="projectName">
                        <span class="in_txt">{{propForm.propertyBasic.projectName}}</span>
                    </el-form-item>
                    <el-form-item label="项目面积(m²)" prop="projectArea">
                        <span class="in_txt">{{propForm.propertyBasic.projectArea}}</span>
                    </el-form-item>
                    <el-form-item label="项目类型" prop="projectType">
                        <span class="in_txt">{{getCardTypeValue(propForm.propertyBasic.projectType,projectType)}}</span>
                    </el-form-item>
                    <el-form-item label="管理权属" prop="manageUnit">
                        <span class="in_txt">{{getCardTypeValue(propForm.propertyBasic.manageUnit,manageUnits)}}</span>
                    </el-form-item>
                    <el-form-item  label="是否为更新项目" prop="isUpdate" v-if="addSource">
                        <span class="in_txt">{{propForm.propertyBasic.isUpdate === '1' ? '否' : '是'}}</span>
                    </el-form-item>
                    <el-form-item label="开发单位">
                        <span class="in_txt">{{propForm.propertyBasic.constructionUnit}}</span>
                    </el-form-item>
                    <el-form-item label="联系人">
                        <span class="in_txt">{{propForm.propertyBasic.contactName}}</span>
                    </el-form-item>
                    <el-form-item label="联系电话" prop="contactPhone" >
                        <span class="in_txt">{{propForm.propertyBasic.contactPhone}}</span>
                    </el-form-item>
                    <el-form-item label="当前阶段">
                        <span class="in_txt">{{propForm.propertyBasic.stage}}</span>
                    </el-form-item>
                    <el-form-item label="地图坐标" prop="mapCoordinates">
                        <span class="in_txt">{{propForm.propertyBasic.mapCoordinates}}</span>
                    </el-form-item>
                    <el-form-item label="总栋数" prop="mapCoordinates">
                        <span class="in_txt">{{propForm.totalBuilding}}</span>
                    </el-form-item>
										<el-form-item label="数据渠道" >
											<span class="in_txt">{{getCardTypeValue(propForm.propertyBasic.channel,propertyChannels)}}</span>
										</el-form-item>
                    <el-form-item label="备注" class="full">
                        <span class="in_txt">{{propForm.propertyBasic.remarks}}</span>
                    </el-form-item>

                </el-form>
            </div>
        </div>
        <div class="resource-manage" >
            <div class="card-box">
                <div class="card-title">物业信息</div>
                <div class="table-planning">
                    <el-table :data="propForm.supportingFacilities" align="center">
                        <el-table-column prop="propertyName" label="物业名称" width="120">
                        </el-table-column>
                        <el-table-column prop="projectType" label="物业类型" width="120">
                            <template slot-scope="scope">
                                <span>{{getCardTypeValue(scope.row.projectType,propertyTypes)}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="projectSubclassType" label="物业规划" width="120">
                            <template slot-scope="scope">
                                <span>{{getCardTypeValue(scope.row.projectSubclassType, propertyUseTypes)}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="floorSpace" label="占地面积(m²)" width="120">
                        </el-table-column>
                        <el-table-column prop="buildArea" label="建筑面积(m²)" width="120">
                        </el-table-column>
                        <el-table-column prop="transferMode" label="移交方式" width="120">
                            <template slot-scope="scope">
                                <span>{{getCardTypeValue(scope.row.transferType,transferModeOption)}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="remarks" label="备注" width="120">
                        </el-table-column>
                        <el-table-column
                            label="操作"
                            width="100">
                            <template slot-scope="scope">
                                <el-button @click="handleClickLook(scope)" type="text" size="small">查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <div class="resource-manage" >
            <div class="card-box">
                <div class="card-title">资料信息</div>
                <div class="material">
                    <el-tabs v-model="milestoneSort">
                        <el-tab-pane :name="item.milestoneSort.toString()" :key="item.milestoneSort" v-for="item in propForm.projectMilestones">
                                <span slot="label">
                                    <div class="tabRadius">{{ item.milestoneSort }}</div>
                                    <div>{{ item.milestoneName }}</div>
                                </span>
                            <el-table :data="item.materialsFormVoList" class="material-table" align="center" style="width: 100%;" @selection-change="handleSelectionChange">
                                <el-table-column prop="sort" label="序号" width="60"></el-table-column>
                                <el-table-column prop="materialsName" label="材料名称" width="120">
                                    <template slot-scope="scope"><div v-html='scope.row.materialsName'></div></template>
                                </el-table-column>
                                <el-table-column prop="fileBusId" label="文件名称" width="160">
                                    <template slot-scope="scope">
                                        <el-row :gutter="10">
                                            <el-col :xs="17" :sm="17" :md="17" :lg="17" :xl="17">
                                                <div class="grid-content bg-purple-light" style="line-height: 40px" v-if="scope.row.original">
                                                    <span style="margin-right: 10px;">{{scope.row.original}}</span>
                                                    <el-button type="text" @click="handleDownload(scope.row)">下载</el-button>
                                                </div>
                                            </el-col>
                                        </el-row>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="remarks" label="备注" width="120"></el-table-column>
                            </el-table>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </div>
        <div class="resource-manage" >
            <div class="card-box">
                <el-button type="primary" plain class="planning-button" @click="closeTab">关闭</el-button>
            </div>
        </div>
        <supportFacilityInformation ref="supportFacilityInformation"></supportFacilityInformation>
    </div>
</template>

<script src="./project_look.js">

</script>

<style scoped lang="scss">
    .project-form-box {
        @include formWrap(4);
        .in_txt {
            color: #999999;
        }
        .resource-manage {
            margin: 20px;
            .card-box {
                padding: 16px 24px;
                overflow: hidden;
                .planning-button {
                    margin: 10px;
                    float: right;
                }
                .material {
                    padding: 20px;
                    .material-table {
                        margin: 20px 0;
                        position: relative;
                    }
                }
                //里程碑样式-开始
                /deep/ .el-tabs__header {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-around;
                }
                /deep/ .el-tabs__item {
                    margin: 0 50px;
                    .tabRadius {
                        width: 50px;
                        height: 50px;
                        line-height: 50px;
                        text-align: center;
                        border: 1px solid;
                        border-radius: 50%;
                        background-color: #fff;
                    }
                }
                /deep/ .el-tabs__active-bar {
                    height: 0;
                    background-color: #fff;
                }
                /deep/ .el-tabs__nav-wrap::after {
                    left: 50px;
                    bottom: 50px;
                    width: calc(100% - 120px);

                }
                //里程碑样式-结束
            }
        }
    }
</style>
